Embedded Mermaid Diagrams

How do you embed Mermaid diagrams into a slide? The challenge is that you need to render a cell inside another cell.

There is a special wrapper that allows you to embed cell content into a custom DOM element provided by the execution environment — CellView.

info

When working with slides, every Wolfram Expression is transformed into WLXForm. You need to define this form for your symbol in order to render it correctly on a slide. Alternatively, you can use wrappers that support both StandardForm and WLXForm by default, such as FrontEndExecutable, provided by CreateFrontEndObject.

CellView, EditorView, Graphics, and some other symbols do not require extra actions, since WLXForm is already defined for them.

MyDiagram = CellView["
graph LR
    A[Text Header 3200 byte]  --> B[Binary Header 400 byte]
    B --> C1[240 byte 1-st trace header] --> T1[samples of 1-st trace]
    B --> C2[240 byte 2-st trace header] --> T2[samples of 2-nd trace]
    B --> CN[240 byte n-th trace header] --> T3[samples of n-th trace] 
", "Display"->"mermaid", ImageSize->900] 

Then on a slide, simply run:

.slide

# Title of My Slide

<MyDiagram/>